<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>添加人</title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <script src="../../js/vue.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/mui.picker.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/main.js"></script>
</head>
<body>
<div id="app">
    <header class="mui-bar mui-bar-nav">
        <span class="back"></span>
        <span class="cross"></span>
        <h1 class="mui-title" style="left: 80px;right: 80px">添加人</h1>
    </header>
    <div class="mui-content" style="padding-bottom: 70px">
        <div class="add-sender add-me">
            <p>参会人<span>（点击头像可删除）</span></p>
            <div class="report-headimg fl" style="margin-top: 6px;margin-right: 5px" v-for="(item,index) in selected" v-text="item.hName" @click="del(index)"></div>
            <div class="add-btn fl" @click="open_popup"></div>
            <p class="sender">添加</p>
        </div>
        <!--<div class="add-sender add-me">
            <p>会议记录员<span>（唯一）</span></p>
            <div class="report-headimg fl" style="margin-top: 6px;margin-right: 5px"></div>
            <div class="add-btn fl"></div>
            <p class="sender">添加</p>
        </div>-->
        <div class="report-footer">
            <div class="submit-btn">提交</div>
        </div>
    </div>
    <div class="popup-bg" v-show="dept">
        <header class="mui-bar mui-bar-nav">
            <span class="back" @click="go_back"></span>
            <h1 class="mui-title">选择接收人</h1>
        </header>
        <div class="popup-content">
            <ul class="popup-list">
                <li v-for="(item, index) in depts">
                    <div class="fr popup-next" v-show="item.show" @click="show_next(index)" :style="{color: item.sel_able?'#007aff':'#999'}">下级</div>
                    <div class="popup-info">
                        <input type="checkbox" :checked="item.check" @click="toggle(index)">
                        <div class="report-top" style="padding: 6px 0;float: left;margin-left: 10px">
                            <div class="report-headimg fl" style="margin-top: 2px" v-text="item.hName"></div>
                            <div class="report-info">
                                <p style="line-height: 45px">{{item.name}}<span style="color: #8f8f94;" v-show="item.show">（{{item.total}}）</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>
        </div>
        <div class="popup-footer">
            <div class="haveSelected">已选择: <span v-text="selected_num"></span>人</div>
            <div class="popup-footer-btn fr" @click="confirm">
                确定
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: function () {
            return{
                dept: false,
                depts: [],
                selected_num: 0,
                selected: [],
                rid: []
            }
        },
        methods: {
            open_popup: function () {
                var this_obj = this;
                var number = 0;
                this_obj.rid.push(number);
                console.log(this_obj.rid);
                var url = "/organization/dept";
                var data = {
                    "companyId": 6, //公司ID
                    "deptId": number // 初始传入0
                };
                common_ajax(url,data,function (res) {
                    if(res.code < 0){
                        mui.toast(res.errorMsg);
                    }else{
                        console.log(res);
                        this_obj.dept = true;
                        this_obj.depts = [];
                        for(var i in res.obj.depts){
                            var hName = res.obj.depts[i]['name'].substr(0,2);
                            this_obj.depts.push({id: res.obj.depts[i]['id'],total: res.obj.depts[i]['total'],hName: hName,name: res.obj.depts[i]['name'],check:false,show: true,sel_able: true});
                        }
                        for(var j in res.obj.users){
                            var eName = res.obj.users[j]['name'].slice(-2);
                            this_obj.depts.push({id: res.obj.users[j]['id'],total: res.obj.users[j]['total'],hName: eName,name: res.obj.users[j]['name'],check:false,show: false,sel_able: true});
                        }
                    }
                },function (res) {
                    mui.toast("拉取联系人失败");
                });
            },
            show_next: function (index) {
                var this_obj = this;
                if(this_obj.depts[index]['sel_able'] == true){
                    var number = this_obj.depts[index]['id'];
                    this_obj.rid.push(number);
                    console.log(this_obj.rid);
                    var url = "/organization/dept";
                    var data = {
                        "companyId": 6, //公司ID
                        "deptId": number // 初始传入0
                    };
                    common_ajax(url,data,function (res) {
                        if(res.code < 0){
                            mui.toast(res.errorMsg);
                        }else{
                            console.log(res);
                            this_obj.depts = [];
                            for(var i in res.obj.depts){
                                var hName = res.obj.depts[i]['name'].substr(0,2);
                                this_obj.depts.push({id: res.obj.depts[i]['id'],total: res.obj.depts[i]['total'],hName: hName,name: res.obj.depts[i]['name'],check:false,show: true,sel_able: true});
                            }
                            for(var j in res.obj.users){
                                var eName = res.obj.users[j]['name'].slice(-2);
                                this_obj.depts.push({id: res.obj.users[j]['id'],total: res.obj.users[j]['total'],hName: eName,name: res.obj.users[j]['name'],check:false,show: false,sel_able: true});
                            }
                        }
                    },function (res) {
                        mui.toast("拉取联系人失败");
                    })
                }
            },
            toggle: function (index) {
                var this_obj = this;
                var url = "/organization/dept";
                if(this_obj.depts[index]['check'] == false){
                    this_obj.depts[index]['check'] = true;
                    this_obj.depts[index]['sel_able'] = false;
                    if(this_obj.depts[index]['show'] == true){
                        recursion(this_obj.depts[index]['id']);
                        function recursion(deptId) {
                            var data = {
                                "companyId": 6, //公司ID
                                "deptId": deptId
                            };
                            common_ajax(url,data,function (res) {
                                if(res.code < 0){
                                    mui.toast(res.errorMsg);
                                }else{
                                    console.log(res);
                                    if(res.obj.depts.length == 0){
                                        for(var j in res.obj.users){
                                            var eName = res.obj.users[j]['name'].slice(-2);
                                            this_obj.selected.push({id: res.obj.users[j]['id'],hName: eName,name: res.obj.users[j]['name']});
                                        }
                                    }else{
                                        for(var i in res.obj.depts){
                                            recursion(res.obj.depts[i]['id']);
                                        }
                                        for(var x in res.obj.users){
                                            var myName = res.obj.users[x]['name'].slice(-2);
                                            this_obj.selected.push({id: res.obj.users[x]['id'],hName: myName,name: res.obj.users[x]['name']});
                                        }
                                    }
                                    console.log(this_obj.selected);
                                    this_obj.selected_num = this_obj.selected.length;
                                }
                            },function (res) {
                                mui.toast("拉取联系人失败");
                            });
                        }
                    }else{
                        this_obj.selected.push({id: this_obj.depts[index]['id'],hName: this_obj.depts[index]['hName'],name: this_obj.depts[index]['name']});
                        this_obj.selected_num = this_obj.selected.length;
                    }
                }else{
                    this_obj.depts[index]['check'] = false;
                    this_obj.depts[index]['sel_able'] = true;
                    if(this_obj.depts[index]['show'] == true){
                        del(this_obj.depts[index]['id']);
                        function del(deptId) {
                            var data = {
                                "companyId": 6, //公司ID
                                "deptId": deptId
                            };
                            common_ajax(url,data,function (res) {
                                if(res.code < 0){
                                    mui.toast(res.errorMsg);
                                }else{
                                    console.log(res);
                                    if(res.obj.depts.length == 0){
                                        for(var j in res.obj.users){
                                            for(var y = 0;y < this_obj.selected.length;y++){
                                                if(this_obj.selected[y]['id'] == res.obj.users[j]['id']){
                                                    this_obj.selected.splice(y,1);
                                                    y--;
                                                }
                                            }
                                        }
                                    }else{
                                        for(var i in res.obj.depts){
                                            del(res.obj.depts[i]['id']);
                                        }
                                        for(var x in res.obj.users){
                                            for(var a = 0;a < this_obj.selected.length;a++){
                                                if(this_obj.selected[a]['id'] == res.obj.users[x]['id']){
                                                    this_obj.selected.splice(a,1);
                                                    a--;
                                                }
                                            }
                                        }
                                    }
                                    console.log(this_obj.selected);
                                    this_obj.selected_num = this_obj.selected.length;
                                }
                            },function (res) {
                                mui.toast("拉取联系人失败");
                            });
                        }
                    }else{
                        for(var a = 0;a < this_obj.selected.length;a++){
                            if(this_obj.selected[a]['id'] == this_obj.depts[index]['id']){
                                this_obj.selected.splice(a,1);
                                a--;
                            }
                        }
                        this_obj.selected_num = this_obj.selected.length;
                    }
                }
            },
            confirm: function () {
                var this_obj = this;
                this_obj.dept = false;
            },
            del: function (index) {
                var this_obj = this;
                this_obj.selected.splice(index, 1);
            },
            go_back: function () {
                var this_obj = this;
                console.log(this_obj.rid);
                if(this_obj.rid[this_obj.rid.length-1] == 0){
                    var btnArray = ['取消', '确定'];
                    mui.confirm('确定要取消本次操作吗？', '', btnArray, function(e) {
                        if (e.index == 1) {
                            this_obj.dept = false;
                            this_obj.rid = [];
                            this_obj.selected = [];
                            this_obj.selected_num = this_obj.selected.length;
                        } else {

                        }
                    })
                }else{
                    this_obj.rid.pop();
                    console.log(this_obj.rid);
                    var number = this_obj.rid[this_obj.rid.length-1];
                    var url = "/organization/dept";
                    var data = {
                        "companyId": 6, //公司ID
                        "deptId": number // 初始传入0
                    };
                    common_ajax(url,data,function (res) {
                        if(res.code < 0){
                            mui.toast(res.errorMsg);
                        }else{
                            console.log(res);
                            this_obj.dept = true;
                            this_obj.depts = [];
                            for(var i in res.obj.depts){
                                var hName = res.obj.depts[i]['name'].substr(0,2);
                                this_obj.depts.push({id: res.obj.depts[i]['id'],total: res.obj.depts[i]['total'],hName: hName,name: res.obj.depts[i]['name'],check:false,show: true,sel_able: true});
                            }
                            for(var j in res.obj.users){
                                var eName = res.obj.users[j]['name'].slice(-2);
                                this_obj.depts.push({id: res.obj.users[j]['id'],total: res.obj.users[j]['total'],hName: eName,name: res.obj.users[j]['name'],check:false,show: false,sel_able: true});
                            }
                        }
                    },function (res) {
                        mui.toast("拉取联系人失败");
                    });
                }
            }
        }
    });
//    app.open_popup();
</script>
</html>